<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import axios from 'axios'
import { MessagePlugin } from 'tdesign-vue-next';

const getTime = () => {
  const date = new Date()
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

interface Message {
  id: number
  content: string
  isSender: boolean
  timestamp: string
}

const messages: Ref<Message[]> = ref([
  {
    id: 1,
    content: "你好！",
    isSender: false,
    timestamp: getTime()
  }
])

const newMessage = ref('')

const sendMessage = async () => {
  if (newMessage.value.trim()) {
    messages.value.push({
      id: Date.now(),
      content: newMessage.value,
      isSender: true,
      timestamp: getTime()
    })
    const res = await fetchChat(newMessage.value)
    newMessage.value = ''
    messages.value.push({
      id: Date.now(),
      content: res.data,
      isSender: false,
      timestamp: getTime()
    })

    scrollToBottom()
  }
}
const fetchChat = async (content: string) => {
  MessagePlugin.loading("加载中")
  // 生成一个数量100的数组



  const res = await axios.post("http://localhost:3001", { content })
  MessagePlugin.close
  return res

}
const handleKeyup = (event: KeyboardEvent) => {
  sendMessage()
}

const scrollToBottom = () => {
  setTimeout(() => {
    const chatContainer = document.querySelector('.chat-messages')
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight
    }
  }, 0)
}

onMounted(() => {
  scrollToBottom()
})
</script>

<template>
  <div class="chat-container">
    <t-card title="聊天界面" :bordered="true" class="chat-card">
      <div class="chat-messages">
        <div v-for="message in messages" :key="message.id"
          :class="['message-item', message.isSender ? 'sender' : 'receiver']">
          <t-avatar size="small"
            :image="message.isSender ? 'https://tdesign.gtimg.com/site/avatar.jpg' : 'https://tdesign.gtimg.com/site/avatar-2.jpg'" />
          <div class="message-content">
            <t-tag theme="primary" variant="light" size="small" class="time-tag">{{ message.timestamp }}</t-tag>
            <div class="message-bubble">{{ message.content }}</div>
          </div>
        </div>
      </div>
      <div class="message-input">
        <t-input v-model="newMessage" placeholder="请输入消息" @Enter="handleKeyup">
          <template #suffix>
            <t-button theme="primary" size="small" @click="sendMessage" :disabled="!newMessage.trim()">发送</t-button>
          </template>
        </t-input>
      </div>
    </t-card>
  </div>
</template>

<style scoped>
.chat-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

@media screen and (max-width: 768px) {
  .chat-container {
    padding: 0 8px;
  }
}

.chat-card {
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .chat-card {
    min-height: calc(100vh - 32px);
  }

  .chat-card :deep(.t-card__header) {
    padding: 12px 16px;
  }
}

.chat-card :deep(.t-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 400px;
}

@media screen and (max-width: 768px) {
  .chat-messages {
    padding: 12px;
    gap: 16px;
    min-height: 300px;
  }
}

.message-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: flex-start;
  width: 100%;
}

.message-item.sender {
  flex-direction: row-reverse;
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 60px);
}

.sender .message-content {
  align-items: flex-end;
}

.time-tag {
  width: fit-content;
  padding: 0 8px;
  font-size: 12px;
}

.message-bubble {
  background: #f0f0f0;
  padding: 8px 12px;
  border-radius: 12px;
  word-wrap: break-word;
  display: inline-block;
  max-width: 100%;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  .message-bubble {
    padding: 6px 10px;
    font-size: 14px;
  }
}

.sender .message-bubble {
  background: #0052d9;
  color: white;
}

.message-input {
  padding: 16px;
  border-top: 1px solid #eee;
}

@media screen and (max-width: 768px) {
  .message-input {
    padding: 12px;
  }
}

:deep(.t-input) {
  --td-input-bg-color: #fff;
}

@media screen and (max-width: 768px) {
  :deep(.t-button) {
    padding: 4px 8px;
    font-size: 14px;
  }
}
</style>